<template>
  <el-dialog
    width="710px"
    :visible="show === 2"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div slot="title" class="title_close">
      <!-- 个人设置 -->
      <div class="title">{{$t('inccom.set_dialog.56hyvk87ylo0')}}</div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="hide" />
    </div>
    <div class="set_list">
      <div class="set_bar">
        <div
          class="set_item"
          @click="checkNav(index)"
          v-for="(item, index) in list"
          :key="index"
          :class="navKey === index ? 'bt-blue' : 'bt-gray'"
        >
          <img
            class="comment_icon"
            :src="navKey === index ? item.img1 : item.img2"
            alt=""
          />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 个人中心列表 -->
    <div class="person_center" v-show="navKey === 0">
      <!-- 头像 -->
      <div class="set_avatar">
        <p>{{$t('inccom.set_dialog.56hyvk87z9k0')}}</p>
        <el-upload
          class="avatar-uploader"
          :action="uploadURL"
          :headers="getAuthHeaders()"
          :before-upload="beforeAvatarUpload"
          :on-success="afterUpload"
          accept="bmg,.png,.jpg,.jpeg"
          :show-file-list="false"
        >
          <img class="ava" :src="headpic ? headpic : defaultImg" alt="" />
        </el-upload>
      </div>
      <!-- 昵称 -->
      <div class="set_input">
        <p>{{$t('inccom.set_dialog.56hyvk87zhc0')}}</p>
        <input
          class="set_text"
          :class="setNickName ? 'bg_tran' : 'bg_black'"
          type="text"
          v-model="nickName"
          maxlength="10"
          :disabled="setNickName"
        />
        <img
          v-if="setNickName"
          @click="setNickName = false"
          src="@/assets/img/icon_x1.png"
          class="edit_icon"
          alt=""
        />
        <img
          v-else
          @click="editNickName"
          src="@/assets/img/icon_dg.png"
          class="edit_icon"
          alt=""
        />
      </div>
      <!-- 性别 -->
      <div class="set_input">
        <p>{{$t('inccom.set_dialog.56hyvk87zlk0')}}</p>
        <el-select
          class="set_select"
          v-model="Sex"
          :disabled="setSex"
          :placeholder="$t('inccom.set_dialog.56hyvk87zps0')"
        >
          <el-option
            v-for="item in sexList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <img
          v-if="setSex"
          @click="setSex = false"
          class="edit_icon"
          src="@/assets/img/icon_x1.png"
          alt=""
        />
        <img class="edit_icon" v-else @click="editSex" src="@/assets/img/icon_dg.png" alt="" />
      </div>
      <!-- 身份证号码 -->
      <div class="set_info">
        <p>{{$t('inccom.set_dialog.56hyvk87zz40')}}</p>
        <input
          class="set_text"
          type="text"
          disabled
          :placeholder="accountInfo.idCard"
        />
      </div>
      <!-- 手机号 -->
      <div class="set_input">
        <p>{{$t('inccom.set_dialog.56hyvk8802o0')}}</p>
        <input
          class="set_text"
          type="text"
          disabled
          :placeholder="accountInfo.account | mobile"
        />
        <img
          class="edit_icon"
          @click="phoneShow = true"
          src="@/assets/img/icon_x1.png"
          alt=""
        />
      </div>
      <!-- 邮箱 -->
      <div class="set_info">
        <p>{{$t('inccom.set_dialog.56hyvk8805o0')}}</p>
        <input
          class="set_text"
          type="text"
          disabled
          :placeholder="accountInfo.email"
        />
      </div>
    </div>
    <!-- 账户安全 -->
    <div class="person_center" v-show="navKey === 1">
      <div class="set_input">
        <p>{{$t('inccom.set_dialog.56hyvk8808k0')}}</p>
        <input class="set_text" type="text" disabled placeholder="********" />
        <img
          src="@/assets/img/icon_x1.png"
          @click="setTradePw(1)"
          class="edit_icon"
          alt=""
        />
      </div>
      <div class="set_input">
        <p>{{$t('inccom.set_dialog.56hyvk880d00')}}</p>
        <input
          class="set_text"
          type="text"
          disabled
          :placeholder="tradePass ? '********' : ''"
        />
        <img
          class="edit_icon"
          @click="setTradePw(2)"
          src="@/assets/img/icon_x1.png"
          alt=""
        />
      </div>
      <div class="set_info">
        <p>{{$t('inccom.set_dialog.56hyvk880fs0')}}</p>
        <input
          class="set_text"
          type="text"
          disabled
          :placeholder="accountInfo.assetType | AssetType(te)"
        />
      </div>
    </div>
    <!-- 常规设置 -->
    <div class="person_center" v-show="navKey === 2">
      <div class="set_info">
        <p>{{$t('inccom.set_dialog.56hyvk880j40')}}</p>
        <el-radio-group v-model="cgsite.lang" @change="selectLang">
          <el-radio label="zh-CN">{{$t('inccom.set_dialog.56hyvk880lw0')}}</el-radio>
          <el-radio label="en">{{$t('inccom.set_dialog.56hyvk880p40')}}</el-radio>
        </el-radio-group>
      </div>
      <div class="set_img">
        <p>{{$t('inccom.set_dialog.56hyvk880s00')}}</p>
        <div class="bg_color">
          <el-radio-group v-model="radio">
            <el-radio :label="1">{{$t('inccom.set_dialog.56hyvk880uo0')}}</el-radio>
          </el-radio-group>
          <div>
            <img class="bg_img" src="@/assets/img/image_ss.png" alt="" />
          </div>
        </div>
      </div>
      <div class="set_red_green">
        <p>{{$t('inccom.set_dialog.56hyvk880xs0')}}</p>
        <el-radio-group v-model="cgsite.upDown" @change="selectColor">
          <el-radio label="RedRose">
            <span>{{$t('inccom.set_dialog.56hyvk8810k0')}}</span>
            <img class="zhangdie" src="@/assets/img/icon_hz.png" alt="" />
            <span>{{$t('inccom.set_dialog.56hyvk8813c0')}}</span>
            <img class="zhangdie" src="@/assets/img/icon_ld.png" alt="" />
          </el-radio>
          <el-radio label="GreenRose">
            <span>{{$t('inccom.set_dialog.56hyvk8819s0')}}</span>
            <img class="zhangdie" src="@/assets/img/icon_lz.png" alt="" />
            <span>{{$t('inccom.set_dialog.56hyvk881f40')}}</span>
            <img class="zhangdie" src="@/assets/img/icon_hd.png" alt="" />
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 协议声明 -->
    <div class="person_center" v-show="navKey === 3">
      <div class="set_img">
        <p>{{$t('inccom.set_dialog.56hyvk881ic0')}}</p>
        <ul class="">
          <li class="xieyi" @click="openXieyi(20)">《{{$t('inccom.set_dialog.56hyvk551so0')}}》</li>
          <li class="xieyi" @click="openXieyi(21)">《{{$t('inccom.set_dialog.56h11k881so0')}}》</li>
        </ul>
      </div>
    </div>
    <!-- 修改登录密码 -->
    <ConfirmPass
      :showCon="isShowConfirmDia"
      :setType="setType"
      @closeConfirm="closeConfirm"
    ></ConfirmPass>
    <!-- 修改手机号 -->
    <Phone
      :showPho="phoneShow"
      :isForgetTraPwd="false"
      :title="$t('inccom.set_dialog.56hyvk881lc0')"
      @closePhone="closePhone"
    >
    </Phone>
    <!-- 设置交易密码 -->
    <BussPassword
      :showBussPass="tradeShow"
      @closeBussPassDia="closeBussPassDia"
    >
    </BussPassword>
    <Disclaimer
      :data="Disclaimerstext"
      :show="disclaimersShow"
      @CloseClick="CloseClicks"
      v-if="disclaimersShow"
    ></Disclaimer>
  </el-dialog>
</template>

<script>
import {get_explain} from '@/assets/js/API/info.js';
import dayjs from "dayjs";
import Phone from "./Phone";
import { compressAccurately } from "image-conversion";
import ConfirmPass from "./ConfirmPass";
import Disclaimer from "@/components/quotation/Disclaimers.vue";
import BussPassword from "@/components/header/set/BussPassword.vue";
import {post_profile} from '@/assets/js/API/user.js'
export default {
  components: {
    Phone,
    ConfirmPass,
    Disclaimer,
    BussPassword,
  },
  inject: ["reload"],
  props: {
    show: Number,
    accountInfo: Object,
  },
  mounted: function () {
    this.cgsite.lang = localStorage.getItem("lang");
    this.$i18n.locale = localStorage.getItem("lang");
    this.cgsite.upDown = sessionStorage.getItem("color");
    // document.getElementsByTagName("body")[0].className=sessionStorage.getItem("color");
  },
  filters: {
    date(val) {
      return dayjs(val * 1000).format("MM-DD    HH:mm");
    },
    mobile(value) {
      if (!value) {
        return "***********";
      }
      let start = value.slice(0, 3);
      let end = value.slice(-4);
      return `${start}****${end}`;
    },
  },
  data() {
    return {
      list: [
        {
          name: this.$t('inccom.set_dialog.56hyvk881o00'),
          img1: require("@/assets/img/icon_grxxb.png"),
          img2: require("@/assets/img/icon_grxxh.png"),
        },
        {
          name: this.$t('inccom.set_dialog.56hyvk881q80'),
          img1: require("@/assets/img/icon_zhaqb.png"),
          img2: require("@/assets/img/icon_zhaqh.png"),
        },
        {
          name: this.$t('inccom.set_dialog.56hyvk881so0'),
          img1: require("@/assets/img/icon_cgb.png"),
          img2: require("@/assets/img/icon_cgh.png"),
        },
        {
          name: this.$t('inccom.set_dialog.56hyvk881ic0'),
          img1: require("@/assets/img/icon_bbxxb.png"),
          img2: require("@/assets/img/icon_bbxxh.png"),
        },
      ],
      navKey: 0, // 导航切换
      busy: false,
      messageBusy: false,
      radio: 1,
      phoneShow: false, // 修改手机号对话框
      isShowConfirmDia: false, // 确认原密码对话框
      passShow: false, // 修改交易密码对话框
      tradeShow: false, // 设置交易密码对话框
      phoneTitle: this.$t('inccom.set_dialog.56hyvk881lc0'),
      nickName: "", // 昵称
      setNickName: true, // 修改昵称
      setSex: true, // 设置性别
      Sex: null, // 性别
      defaultImg: require("@/assets/img/tx.png"),
      sexList: [
        // {
        //   label: this.$i18n.t("m.other"),
        //   value: 0,
        // },
        {
          label: this.$i18n.t("m.male"),
          value: 1,
        },
        {
          label: this.$i18n.t("m.female"),
          value: 2,
        },
      ], // 性别列表
      cgsite: {
        lang: "zh-CN",
        upDown: "",
      }, // 颜色，语言设置
      Disclaimerstext: "",
      disclaimersShow: false,
      setType: 0, // 1：修改密码，2：修改交易密码
    };
  },
  methods: {
    hide() {
      this.$emit("hides");
      this.setSex = true;
      this.setNickName = true;
      this.nickName = this.accountInfo.nickname;
      if (this.accountInfo.sex == 0) this.Sex = null;
      else this.Sex = this.accountInfo.sex;
    },
    // 点击切换nav
    checkNav(index) {
      this.navKey = index;
      this.setSex = true;
      this.setNickName = true;
    },
    closePhone() {
      this.phoneShow = false;
    },
    closePass() {
      this.passShow = false;
    },
    closeConfirm() {
      this.isShowConfirmDia = false;
    },
    // 修改个人信息
    async editInfo() {
      const res = await post_profile({
        nickname: this.nickName,
        avatar: this.headpic,
        sex: this.sex,
      });
      if (res.code != 1) return this.$message.error(res.msg);
    },
    // 修改昵称
    editNickName() {
      this.setNickName = true;
      if (this.nickName == "") {
        this.nickName = this.nickname;
        return this.$message.error(this.$t('inccom.set_dialog.56hyvk881v40'));
      }
      this.$store.dispatch("SetNickname", this.nickName);
      this.editInfo();
    },
    // 修改性别
    editSex() {
      this.setSex = true;
      this.$store.dispatch("SetSex", this.Sex);
      this.editInfo();
    },
    // 图片上传前的认证
    beforeAvatarUpload(file) {
      let types = ["image/jpeg", "image/jpg", "image/png"];
      const isImage = types.includes(file.type);
      if (!isImage) {
        this.$message.error(this.$t('inccom.set_dialog.56hyvkw21v40'));
        return false;
      }
      return new Promise(async (resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 2; // 判定图片大小是否小于4MB
        if (isLt2M) {
          resolve(file);
        }
        console.log(file); // 压缩到400KB,这里的400就是要压缩的大小,可自定义
        // const res = await compressAccurately(file, {
        //   size: 200,
        //   width: 200,
        //   height: 150,
        // });
        const res = await compressAccurately(file, 200);
        console.log(res);
        resolve(res);
      });
    },
    // 图片上传成功后的回调
    afterUpload(response) {
      // 将图片地址存入store中
      this.$store.dispatch("SetHeadpic", response.data.url);
      // 发起修改上传图片的请求
      this.editInfo();
    },
    // 设置语言
    selectLang() {
      localStorage.setItem("lang", this.cgsite.lang);
      this.$i18n.locale = this.cgsite.lang;
      this.$i18n.locale = localStorage.getItem("lang");
      this.reload();
    },
    // 设置颜色
    selectColor(val) {
      this.$confirm(
        this.$i18n.t("m.operation_will"),
        this.$i18n.t("m.prompt"),
        {
          confirmButtonText: this.$i18n.t("m.determine"),
          cancelButtonText: this.$i18n.t("m.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: this.$i18n.t("m.Success_switched"),
          });
          this.cgsite.upDown = val;
          if (val == "") {
            sessionStorage.removeItem("color");
          } else {
            sessionStorage.setItem("color", val);
          }
          document.getElementsByTagName("body")[0].className = val;
          this.siteShow = false;
          this.reload();
        })
        .catch(() => {
          this.cgsite.upDown = sessionStorage.getItem("color");
          this.$message({
            type: "info",
            message: this.$i18n.t("m.CancelledSwitch"),
          });
          // this.cgsite.upDown = val=='theme'?'':'theme';
        });
    },
    DisclaimersClick() {
      this.disclaimersShow = true;
    },
    CloseClicks(msg) {
      this[msg] = false;
    },
    // 获取协议
    async openXieyi(id) {
      const res = await get_explain({ pageId: id });
      if (res.code != 1) return this.$message.errpr(res.msg);
      this.Disclaimerstext = res.data;
      this.disclaimersShow = true;
      if (this.Disclaimerstext.form == 2) {
        window.open(this.Disclaimerstext.pdf);
      } else {
        this.disclaimersShow = true;
      }
    },
    // 若存在交易密码打开修改交易，不存在则设置交易密码
    setTradePw(type) {
      this.setType = type;
      if (type == 2) {
        if (this.tradePass == 0) {
          // 设置交易密码
          this.tradeShow = true;
        } else {
          // 修改交易密码
          // this.passShow = true;
          this.isShowConfirmDia = true;
        }
      } else {
        // 修改原密码
        this.isShowConfirmDia = true;
      }
    },
    // 关闭设置交易密码对话框
    closeBussPassDia() {
      this.tradeShow = false;
    },
  },
  computed: {
    nickname() {
      return this.$store.state.index.nickname;
    },
    headpic() {
      return this.$store.state.index.headpic;
    },
    account() {
      return this.$store.state.index.account;
    },
    sex() {
      return this.$store.state.index.sex;
    },
    assetType() {
      return this.$store.state.index.assetType;
    },
    tradePass() {
      return this.$store.state.index.tradePass;
    },
  },
  watch: {
    accountInfo(val) {
      if (val.sex != 0) this.Sex = val.sex;
      else this.Sex = null;
      this.nickName = val.nickname;
    },
  },
};
</script>

<style lang="less">
@import "~@/assets/less/common.less";
.el-dialog {
  background-color: @sideColor;
  .el-dialog__body {
    padding: 0 20px 20px 20px;
  }
}
.title_close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 14px;
    color: @fff;
    line-height: 28px;
    text-align: center;
  }
  .close {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
}
.set_list {
  padding-bottom: 36px;
  .set_bar {
    display: flex;
    justify-content: space-between;
    .sett_item {
      margin-right: 25px;
      .set_icon {
        margin-right: 5px;
      }
    }
  }
  .comment_readed {
    display: flex;
    align-items: center;
    padding-right: 15px;
    span {
      padding-left: 8px;
      font-size: 12px;
      color: @fbSix;
    }
  }
}
.person_center {
  height: 350px;
  color: @fbSix;
  .edit_icon {
    height: 22px;
  }
  .set_avatar {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    border-top: 1px solid @LightBorderLine;
    p {
      width: 160px;
    }
    .ava {
      width: 50px;
      height: 50px;
      border-radius: 50px;
    }
  }
  .set_input {
    display: flex;
    align-items: center;
    border-top: 1px solid @LightBorderLine;
    padding: 10px 10px;
    p {
      width: 160px;
    }
  }
  .set_info {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    border-top: 1px solid @LightBorderLine;
    border-bottom: 1px solid @LightBorderLine;
    p {
      width: 160px;
    }
  }
  .set_img {
    display: flex;
    align-items: center;
    border-top: 1px solid @LightBorderLine;
    padding: 10px 10px;
    p {
      width: 160px;
      padding-bottom: 60px;
    }
    .bg_color {
      .bg_img {
        width: 100px;
        height: 60px;
        margin-left: 20px;
      }
    }
  }
  .set_red_green {
    display: flex;
    align-items: center;
    border-top: 1px solid @LightBorderLine;
    border-bottom: 1px solid @LightBorderLine;
    padding: 10px 10px;
    p {
      width: 160px;
    }
    .zhangdie {
      margin: 0 5px;
      height: 22px;
    }
  }
}
.set_text {
  background-color: transparent;
  border: 1px solid transparent;
  width: 440px;
  color: @fff;
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: @fff;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: @fff;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: @fff;
  }

  height: 30px;
}
.set_select {
  width: 440px;
  .el-input.is-disabled {
    .el-input__inner {
      background-color: transparent;
      border: none;
      color: @fff;
    }
  }
  .el-input__inner {
    padding-left: 0;
    background-color: @deepBg;
    border: none;
    color: @fff;
  }
}
.message_content {
  height: 350px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: @LightBorderLine;
  }
  &::-webkit-scrollbar-track {
    border-radius: 3px;
    background: transparent;
  }
  .message_time {
    padding-top: 12px;
    padding-bottom: 6px;
    width: 100%;
    text-align: center;
    color: @fbSix;
  }
  .message_detail {
    background-color: @LightBorderLine;
    color: @fff;
    font-size: 12px;
    line-height: 20px;
    padding: 15px 15px;
  }
}
.xieyi {
  color: @hoverColor;
  font-size: 12px;
  line-height: 24px;
  padding-bottom: 20px;
  cursor: pointer;
}
.bg_black {
  background-color: @deepBg;
}
.bg_tran {
  background-color: transparent;
}
.set_item {
  cursor: pointer;
  .comment_icon {
    margin-right: 5px;
    height: 20px;
  }
}
.el-select-dropdown__list {
  padding: 6px 0 0 0;
}
</style>
